<template>
  <div class="demo" @click="getPosition" @mouseup="setZujian">
    <a-button type="primary" @click="createRadio('em-Radio')">
      创建单选
    </a-button>
    <br />
    <a-button type="primary" @click="createChecked('em-Checkbox')">
      创建多选
    </a-button>
    <br />
    <a-button type="primary" @click="createRadio('newRadio')">
      创建单选
    </a-button>

    <h3>控制属性</h3>
    <a-button type="primary" @click="setRadio('newRadio')">
      修改属性
    </a-button>
    <!--   v-bind="componentsProps" -->
    <component
      v-for="(item, index) in comName"
      :key="index"
      :is="item.name"
      v-bind="componentsProps"
      :ref="`${item}${index}`"
      @setSelect="setSelect"
    >
    </component>
  </div>
</template>

<script>
import newRadio from "@/radioButton/radioButton.vue";
export default {
  components: {
    newRadio: newRadio,
  },
  data() {
    return {
      comName: [],
      name: "",
      flag: false,

      // antd  测试数据
      // plainOptions,
      // options,
      // optionsWithDisabled,
      value1: "1",
      value2: "Apple",
      value3: "Apple",

      fontObj: {
        // fontSize: 20,
        // fontWeigth: true,
        fontColor: "#c09553",
        fontSize: "5",
        fontWeight: true,
      },
      borderObj: {
        // 边框颜色
        borderColor: "red",
        // 选中的边框颜色
        borderCheckColor: "#1cd66c",
        // 线条配置 默认实线 0 实线 1 虚线
        borderLine: 0,
        // 边框宽度
        borderWidth: 7, //单位mm
        // 边框高度
        borderHeight: 7, //单位mm
        // 边框形状
        borderShape: 0, //0 圆形 ，1方形
      },
      colorList: [
        { name: "红色", value: "#e06c75" },
        { name: "蓝色", value: "#21b4e0" },
        { name: "黄色", value: "rgba(209, 154, 102)" },
        { name: "黑色", value: "#000" },
      ],
      num: 0,
      randow: Math.ceil(Math.random() * 10),
      createObj: {
        type: 1,
        id: "radioBtn_123",
        x: 0,
        y: 0,
        width: 30,
        height: 30,
      },
    };
  },
  methods: {
    // 单选的事件
    setSelect(value, e) {
      console.log(value.dataField, "value");
      let all = document.querySelectorAll(
        `div[dataField='${value.dataField}']`
      );

      all.forEach((v, i) => {
        console.log(v.getAttribute("gqValue"), value.selectNum);
        console.log();
        if (v.getAttribute("gqValue") != value.selectNum) {
          console.log((v.children[0].style.background = "none"));
        } else {
          v.children[0].style.background = "#409eff";
        }
      });
      console.log(this.caption1);
      alert(this.caption);
    },
    createRadio(name) {
      this.flag = true;
      this.num++;
      this.name = name;

      // this.num++;
      // this.comName.push({
      //   name: name,
      //   props: this.componentsProps,
      //   // name: 1,
      //   // lable: 1,
      //   // fontObj: this.fontObj,
      // });
      console.log("创建单选");
    },
    createChecked(name) {
      this.name = name;
      // this.comName.push({
      //   name: "em-Checkbox",
      //   props: this.componentsProps2,
      // });
      console.log("创建多选");
    },
    getPosition(e) {
      console.log(e);
      this.createObj.x = e.offsetX;
      this.createObj.y = e.offsetY;
      this.createObj.width = 50;
      this.createObj.height = 50;
    },
    // 鼠标松开 创建组件
    setZujian() {
      if (this.flag) {
        this.comName.push({
          name: this.name,
          props: this.componentsProps,
          createObj: this.createObj,
        });
      }

      this.flag = false;
      console.log(this.createObj);
      console.log(this.name);
    },
    setRadio() {
      console.log("修改");
      this.$nextTick(() => {});
      console.log(this.$refs.newRadio1);
    },
  },
  computed: {
    componentsProps() {
      console.log(this.name, "components");

      if (this.name == "newRadio") {
        console.log(this.randow);
        return {
          gqValue: this.randow,
          dataField: "sex",
          caption: String(this.randow),
        };
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.demo {
  width: 1000px;
  height: 1000px;
  background-color: #eee;
  .a-button {
    margin-bottom: 10px;
  }
}
</style>
